{% extends "base.html" %}
{% load static %}
 {% block headjs %}
    <link href="{% static 'datatables/datatables.min.css' %}" rel="stylesheet">
 {% endblock %}
 {% block content %}
 <style>
.justify-content-between{
    margin: 5px 0!important;
}
</style>
    <div class="row">
        <div class="col-lg">
            <div class="card">
                <div class="card-header">
  <div class="row">
        <div class="col-sm">
      <form method="get" id="updateCustomerFormkey"  action="{% url 'api_get_kehu_data' %}">
       <a type="button" class="btn btn-success" href="{% url 'Kehu_Create' %}">新增客户</a>

       <input type="hidden" name="key" value="dingdan">
        <button id="my_chengjiao_kehu_btn" class="btn btn-success">我的成交客户</button>
      </form>

        </div>
        <div class="col-sm">
         </div>
        <div class="col-sm" id="message">
           <a type="button" class="btn btn-success" href="{% url 'upload_file' pk=1 %}">导入</a>
    {#        <a type="button" class="btn btn-success" href="{% url 'Kehu_Create' %}">导出</a>#}
        </div>
  </div>
                      <div class="row mt-2">
   </div>
  <div class="row">
        <div class="col">
      {% include 'Searchfrom.html' %}
                </div>
  </div>
         <!-- 为其他字段添加更多搜索框 -->
                 </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table  id="example" class="table table-striped table-bordered dt-container dt-bootstrap4" style="width:100%">
                            <thead>
                            <tr>
                                <th>客户</th>
                                <th>微信联系人</th>
{#                                <th>联系电话</th>#}
                                 <th>客户来源</th>
                                <th>报名详情</th>
                                {% if request.user.is_superuser %}
                                   <th>客户归属人</th>
                                {% endif %}
                                <th>备注</th>
                                <th>最后跟进记录</th>
                                 <th>录入时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="customer_data_container">
                             {% for kehu in kehu_list %}
                                 <tr>
                                    <th>
                                        {% if kehu.kehu_zhaungtai.guanzhu == 2 %}
                                    <i class="fa fa-star text-warning" aria-hidden="true" style="font-size: 15px";></i>
                                    {% endif %}
                                    <a href="{% url 'Kehu_detail' pk=kehu.id %}">{{ kehu.username }}</a>
                                     </th>
                                    <th>{{ kehu.name }}</th>
{#                                    <th>{{ kehu.tel }}</th>#}
                                    <th>{{ kehu.tg_qudao }}-{{ kehu.tg_qudao.tg_leixing }}</th>
                                    <th>  {% for foo,fook,ifbm in kehu_list_with_last_genjin %}
                                                  {% if kehu == foo %}
                                                       {% if ifbm == 0 %}
                                                        <button type="button" class="btn btn-primary">未报名</button>
                                                          {% else %}
                                                           <a  href="{% url 'Kehu_detail' pk=kehu.id %}#v-pills-profile"> <button type="button" class="btn btn-success">已报名 <span class="badge badge-light badge-pill">{{ ifbm }}</span></button></a>
                                                  {% endif %}
                                                     {% endif %}
                                                {% endfor %}
                                    </th>
                                        {% if request.user.is_superuser %}
   <th> <a href="{% url 'Kehu_detail' pk=kehu.id %}">{{ kehu.admin_user.last_name }}{{ kehu.admin_user.first_name }}</a>
                                    </th>
{% endif %}
                                    <th>
                                       <div class="text-truncate" style="max-width: 200px;">
                                        {{ kehu.beizhu }}
                                        </div>
                                    </th>
                                    <th>
                                        <div class="text-truncate" style="max-width: 200px;">
 {% for foo,fook,ifbm in kehu_list_with_last_genjin %}
                                                  {% if kehu == foo %}
                                                        {{ fook }}
                                                  {% endif %}
   {% endfor %}
                                                </div>
                                    </th>
                                    <th>{{ kehu.addtime }}</th>
                                    <th>
                                        <a type="button" class="btn btn-warning" href="{% url 'Kehu_detail' pk=kehu.id %}"><i class="fa-vcard fa"></i></a>
                                    </th>
                                 </tr>
                             {% endfor %}
                             </tbody>
                        </table>
                     <div class="row">
                     </div>
<div class="pagination m-2">
    <span class="step-links page-item m-2">
        {% if has_previous %}
            <a class="page-link" href="?page={{ previous_page_number }}">上一页</a>
        {% endif %}
     </span>
        <span class="current page-link m-2">
            页码 {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
        </span>
<span class="step-links page-item m-2">
        {% if has_next %}
            <a class="page-link"href="?page={{ next_page_number }}">下一页</a>
        {% endif %}
    </span>
</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block footerjs %}
<script src="{% static 'datatables/datatables.min.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#my_chengjiao_kehu_btn').click(function(event) {
        event.preventDefault();  // 阻止默认事件（如果需要的话）
         var formData = $('#updateCustomerFormkey').serializeArray();
        var updateData = {};
        $.each(formData, function(index, field) {
            updateData[field.name] = field.value;
        });
         $.ajax({
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            url: '/api/get_dingdan_kehu/',
            type: 'GET',
            data: updateData,
            success: function (data) {
                // 在这里使用数据重新渲染页面
                var htmlContent = ''; // 用于构建 HTML 内容的变量
                data.forEach(function (customer) {
                    // 假设每个客户数据是一个对象，包含 name 和 id 属性
                    htmlContent +=
                        ' <tr><th>' +customer.username+'</th>'+
                         '<th>' +customer.name+'</th>'+
                         '<th>' +customer.kehu_zhaungtai_id+'</th>'+
                         '<th>' +customer.admin_user_id+'</th>'+
                         '<th>' +customer.addtime+'</th>'+
                         '<th>' +customer.name+'</th></tr>';
                    // 还可以根据需要处理其他属性，比如地址、电话等;
                });
                $('#customer_data_container').html(htmlContent); // 将构建好的 HTML 内容插入到容器中
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // 请求失败时的回调函数，可以在这里处理错误情况
                console.error('AJAX 请求失败：', textStatus, errorThrown);
                $('#message').html("请求失败: " + errorThrown);
            }
        });
    });
});
</script>
 {% endblock %}
